import React from "react";
import { Flex , Toast} from "antd-mobile";
import { IFlexAPI } from "@tools/AntdMobile";
import { HisrotyCard } from "@ui/HistoryCard";
import { Request , IRequestParam } from "@tools/Request";
import { AxiosResponse } from 'axios';
import { DateFormat , IDateOb } from '@tools/DateFormat';
import { observer , inject } from "mobx-react";
import "@scss/Funny.scss";

const FlexConf: IFlexAPI  = {
    wrap: "wrap"
};

const today: IDateOb = new DateFormat().datePart(new Date());

const GetHistoryParam: IRequestParam = {
    url: "/juhe/getHistory",
    method: "get",
    data: {
        v: "1.0",
        month: today.month,
        day: today.date
    }
}

@inject("Funny")
@observer
class Funny extends React.Component<any,{}> {

    public constructor(props) {
        super(props);
        this.cardClick = this.cardClick.bind(this);
    }

    public async componentDidMount() {
        const localResult = sessionStorage.getItem(`history-${today.month}-${today.date}`);
        if(localResult && localResult.length > 0) {
            this.props.Funny.setHistory(JSON.parse(localResult));
        }else {
            try {
                const result: AxiosResponse = await Request(GetHistoryParam);
                if(result.data.errorCode === 0) {
                    this.props.Funny.setHistory(result.data.result.result);
                    sessionStorage.setItem(`history-${today.month}-${today.date}`,JSON.stringify(result.data.result.result));
                }else {
                    Toast.fail(result.data.errorMessage);
                }
            }catch(error) {
                Toast.fail(error);
            }
        }
    }

    public async queryHistoryDetail(id: string) {
        const HistoryDetail = sessionStorage.getItem(`history-detail-${id}`);
        if(HistoryDetail && HistoryDetail.length > 0) {
            this.props.Funny.setDetail(JSON.parse(HistoryDetail),id);
            this.props.history.push(`/home/Funny/HistoryDetail/${id}`);
        }else {
            try {
                const GetDetailParam: IRequestParam = {
                    url: "/juhe/getHistoryDetail",
                    method: "get",
                    data: {
                        v: "1.0",
                        id,
                    }
                }
                const result: AxiosResponse = await Request(GetDetailParam);
                if(result.data.errorCode === 0) {
                    this.props.Funny.setDetail(result.data.result.result,id);
                    sessionStorage.setItem(`history-detail-${id}`,JSON.stringify(result.data.result.result));
                    this.props.history.push(`/home/Funny/HistoryDetail/${id}`);
                }else {
                    Toast.fail(result.data.errorMessage);
                }
            }catch(error) {
                Toast.fail(error);
            }
        }
    }

    public cardClick(id) {
        this.queryHistoryDetail(id);
    }

    public render() {
        const { historyArr } = this.props.Funny;
        return (
            <div className="FunnyRoot">
                <Flex {...FlexConf} className="HistoryCardCotent">
                    {
                        historyArr && historyArr.map(item => {
                            return <Flex.Item key={ item._id } className="HistoryCardItem">
                                <HisrotyCard { ...item } cardClick={ this.cardClick }/>
                            </Flex.Item>
                        })
                    }
                </Flex>
            </div>
        )
    }
}

export default Funny;